import React, { Component } from 'react'
import { Menu } from 'antd'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'
import './Navigation.css'
import 'antd/dist/antd.css'
import hotel from './Data'

const { SubMenu } = Menu;

export default class Navigation extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }
    _handleClick = item => {
        this.props.handleClick(item)
    }
    render() {
        return (
            <div id="navigation">
                <Menu

                    style={{ width: 256 }}
                    defaultOpenKeys={['sub1', 'sub2', 'sub3']}
                    mode="inline"
                >
                    {this.props.hotels.map(hotel => {
                        return <SubMenu key={"sub" + hotel.id} title={hotel.name}>
                            {hotel.items.map(item => {
                                return <Menu.Item onClick={() => this._handleClick(item)} key={item.id}>{item.name}</Menu.Item>
                            })
                            }
                        </SubMenu>
                    })}
                    

                </Menu>
                <p id="zhushi">注：订房要趁早！</p>
            </div>
        )
    }
}
